<template>
	<view class="img_box">
		<image  :show-menu-by-longpress="true" v-show="showImg" :src="Url" @error="handleImgError" @load="handleImgLoad" class="_image" :mode="mode" :style="imgstyle"></image>
		<view class="loadfail-img" v-if="isLoadError"></view>
		<view class="loading-img looming-gray" v-show="!showImg && !isLoadError"></view>
	</view>
</template>

<script>
import base from '@/common/baseUrl.js';
import util from '@/common/util.js';
import {mapState, mapMutations} from 'vuex';

export default {
	props: {
		src: {
			type: String,
			default: ''
		},
		mode: {
			type: String,
			default: ''
		},
		imgstyle: {
			type: String,
			default: ''
		},
		imgtype: {
			type: String,
			default: '0'
		},
	
	},
	data() {
		return {
			baseUrl: base.baseUrl,
			showImg: false,
			isLoadError: false
		};
	},
	computed: {
		Url() {
			var url = this.src;
			if (this.imgtype == 1) {
				if (this.src.indexOf('http') > -1) {
					
				} else {
				url = this.baseUrl + '/' + this.src;
				}
			} else {
				if (this.src.indexOf('http') > -1) {
					
				} else {
					url = this.oss + '/' + this.src;
				}
			}

			return url;
		},
		...mapState(['oss'])
	},
	methods: {
		handleImgError(e) {
			this.isLoadError = true;
		},
		handleImgLoad(e) {
			this.showImg = true;
			this.isLoadError = false;
			setTimeout(() => {
				this.showTransition = true;
			}, 50);
		}
	}
};
</script>

<style lang="scss" scoped>
.img_box {
	width: 100%;
	height: 100%;
	overflow: hidden;
	._image {
		display: block;
		width: 100%;
		height: 100%;
	}
}

/* 加载失败、加载中的占位图样式控制 */
.loadfail-img {
	height: 100%;
	background: url('https://jzwl365.oss-cn-beijing.aliyuncs.com/static/easy-loadimage/loadfail.png') no-repeat center;
	background-size: 50%;
}
</style>
